<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>永修高标准农田-首页</title>
		<link rel="import" href="header.html" id="page1">
		<style>
			* { touch-action: none; }
			html,
			body {
				background-color: #efeff4;
			}
			
			.mui-active .mui-tab-label{
				color:#2dbb55;
			}
			
			.bottom_bar{
				-webkit-box-shadow:none;
				padding: 3px 0px;
				height: 58px;
				background: #fff;
			}
			
		</style>
	</head>

	<body>
		<div id="app" class="mui-content" v-cloak>
			<!-- <header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 id="title" class="mui-title">永修高标准农田</h1>
			</header> -->
			<nav class="mui-bar mui-bar-tab bottom_bar">
				<a data-index="0" id="defaultTab" class="mui-tab-item mui-active" href="index_main.html">
					<span class="mui-icon">
						<image v-if="currentWebviewIndex==0" src="../images/index/tab1_on.png" width="20px">
						<image v-else src="../images/index/tab1_off.png" width="20px">
					</span>
					<span class="mui-tab-label">首页</span>
				</a>
				<a data-index="1" class="mui-tab-item" href="buss/indexgd2.html">
					<span class="mui-icon">
						<image v-if="currentWebviewIndex==1" src="../images/index/tab2_on.png" width="20px">
						<image v-else src="../images/index/tab2_off.png" width="20px">
					</span>
					<span class="mui-tab-label">工单</span>
				</a>
				<a data-index="2" class="mui-tab-item" href="buss/xunjian.html">
					<span class="mui-icon">
						<!-- <span class="mui-badge">9</span> -->
						<image v-if="currentWebviewIndex==2" src="../images/index/tab3_on.png" width="20px">
						<image v-else src="../images/index/tab3_off.png" width="20px">
					</span>
					<span class="mui-tab-label">巡检</span>
				</a>
				<a data-index="3" class="mui-tab-item" href="buss/tiankuai.html">
					<span class="mui-icon">
						<!-- <span class="mui-badge">9</span> -->
						<image v-if="currentWebviewIndex==3" src="../images/index/tab4_on.png" width="20px">
						<image v-else src="../images/index/tab4_off.png" width="20px">
					</span>
					<span class="mui-tab-label">田块</span>
				</a>
				<a data-index="4" class="mui-tab-item" href="sys/user-setting.html">
					<span class="mui-icon">
						<image v-if="currentWebviewIndex==4" src="../images/index/tab5_on.png" width="20px">
						<image v-else src="../images/index/tab5_off.png" width="20px">
					</span>
					<span class="mui-tab-label">我的</span>
				</a>
				
			</nav>
		</div>
		<script type="text/javascript" charset="utf-8">
			
			var vm = new Vue({
				el:"#app",
				data:{
					currentWebviewIndex:0
				},
				methods:{
					init(){
						 //mui初始化
						mui.init({
							statusBarBackground: '#f7f7f7'
						});
						var subpages = [
							'index_main.html',
							'buss/indexgd2.html',
							'buss/xunjian.html',
							'buss/tiankuai.html', 
							'sys/user-setting.html',
						  ];
						var subpage_style_index = {
							top:"0px",
							// bottom: '61px',
							bottom: '57px',
						};
						
						var subpage_style = {
							top:"0px",
							// bottom: '61px',
							bottom: '57px',
							statusbar: {
								background: "#f7f7f7"
							}
							
						};
						
						var aniShow = {};
						
						 //创建子页面，首个选项卡页面显示，其它均隐藏；
						mui.plusReady(function() {
							
							// var wv = plus.webview.currentWebview();  
							// wv.setStyle({  
							// 	titleNView: {  
							// 		type:"transparent",
							// 		autoBackButton:true,
							// 		titleText: '永修高标准农田11' ,
							// 		// backgroundcolor: "#2dbb55",
							// 		// titlecolor: "#fff"
							// 	}  
							// })  
							
							var self = plus.webview.currentWebview();
							for (var i = 0; i < 5; i++) {
								var temp = {};
								var sub = null;
								if(i==0){
									sub = plus.webview.create(subpages[i], subpages[i], subpage_style_index);
								}else{
									sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
								}
								
								if (i > 0) {
									sub.hide();
								}else{
									temp[subpages[i]] = "true";
									mui.extend(aniShow,temp);
								}
								self.append(sub);
							}
						});
						
						 //当前激活选项
						var activeTab = subpages[0];
						// var title = document.getElementById("title");
						 //选项卡点击事件
						mui('.mui-bar-tab').on('tap', 'a', function(e) {
							var targetTab = this.getAttribute('href');
							if (targetTab == activeTab) {
								return;
							}
							//更换标题
							// title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
							//显示目标选项卡
							//若为iOS平台或非首次显示，则直接显示
							if(mui.os.ios||aniShow[targetTab]){
								plus.webview.show(targetTab);
							}else{
								//否则，使用fade-in动画，且保存变量
								var temp = {};
								temp[targetTab] = "true";
								mui.extend(aniShow,temp);
								plus.webview.show(targetTab,"fade-in",300);
							}
							//隐藏当前;
							plus.webview.hide(activeTab);
							//更改当前活跃的选项卡
							activeTab = targetTab;
							
							vm.currentWebviewIndex = subpages.indexOf(activeTab);
							
						});
						
						 //自定义事件，模拟点击“首页选项卡”
						document.addEventListener('gohome', function() {
							var defaultTab = document.getElementById("defaultTab");
							//模拟首页点击
							mui.trigger(defaultTab, 'tap');
							//切换选项卡高亮
							var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
							if (defaultTab !== current) {
								current.classList.remove('mui-active');
								defaultTab.classList.add('mui-active');
							}
						});
						
					},
					// 获取登入用户信息
					getLoginUser(){
						mui.get(baseUrl+'/sys/user/info',{},function(r){
							if (r && r.code === 0) {
								var storage = window.localStorage;
								//写入user信息
								storage.setItem("user",
									JSON.stringify({
										"id":r.user.id,
										"username":r.user.username,
										"name":r.user.name,
										"deptName":r.user.deptName,
										"mobile":r.user.mobile,
										"email":r.user.email,
									})
								);
							}else{
								mui.toast(r.msg,{ duration:'long', type:'div' }) 
							}
						});
					},
					updateClientId(clientid){
						
						if(null != clientid){
							mui.ajax(baseUrl+"/app/updateClientId",{
								data:{
									clientid:clientid,
								},
								type:'post',//HTTP请求类型
								success:function(r){
									//服务器返回响应，根据响应结果，分析是否登录成功；
									if(r.code == 0){
										
									}else{
										mui.toast(r.msg)
									}
								}
							});
						}
					}
				},
				created() {
					
				},
				mounted() {
					this.init();
					this.getLoginUser();
					
					mui.plusReady(function() {  
						var t1 = window.setInterval(function()  {
							var clientid = plus.push.getClientInfo().clientid;
							if(clientid)  { 
								vm.updateClientId(clientid);
								window.clearInterval(t1);     
							}                 
						},1000);  
						
					});
					
				}
			})
			
		</script>
	</body>

</html>